<template>

  <!-- 封装数字组件, 需要引入mui的js对其进行初始化 -->
  <div class="mui-numbox" data-numbox-min='1' style="height: 23px">
    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
    <input class="mui-input-numbox" :value="initCount" ref="count" @change="changeCount" />
    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
  </div>

</template>

<script>
/** 使用 vuex 中的更新购物车数据的方法 **/
import { mapMutations } from 'vuex'

/** 导入mui **/
import mui from "../../../lib/mui/js/mui.min.js"

export default {
  data(){
    return {}
  },
  mounted() {
    /** 初始化组件 **/
    mui(".mui-numbox").numbox();
  },
  methods: {
    ...mapMutations(['updateCar']),
    changeCount(){
      /* 获取值的变动 */
      let count = parseInt(this.$refs.count.value);
      /* 将数据的变动同步到store中 */
      this.updateCar({id: this.id, count: count});
    }
  },
  props: ['initCount', 'id']
}
</script>

<style lang="scss" scoped>

</style>